@import '../../assets/scss/app';
.jiucard_head {
  .head-cont {
    .tit {
      color: #333;
      @include font-dpr(34);
      font-weight: 700;
    }
  }
}
.prime_index_wrap {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  min-height: 100%;
  background-color: #f7f6f8;
  .prime_cap_sign_pop {
    > .jf-shadow-wrap {
      z-index: 1000;
    }
  }
  .jf-validcode-footer {
    color: #4d50fb !important;
  }
  .blue {
    color: #2c78dc;
  }
  .capital_confirm {
    color: #4d50fb !important;
  }
  .disabled_bg {
    background: #cccccc !important;
  }
  .jf-btn-active {
    color: #4c4ffa !important;
  }
  .jf-dialog-header {
    color: #333;
  }
  .jf-icon-selected {
    color: #2c78dc !important;
  }
  .jf-floatframe-content {
    overflow-y: auto;
    ul li {
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
    }
  }
  .jf-dialog-wrap {
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }
}
.order_info_wrap {
  position: relative;
  overflow: hidden;
  .info_box {
    @include px2rem(margin, 30 40 50 40);
    box-shadow: 0 4px 40px 0 rgba(51, 51, 51, 0.08);
    @include px2rem(border-radius, 20);
  }
  &.module_c {
    .period {
      @include px2rem(margin-top, 28);
      @include px2rem(padding-bottom, 6);
      border-bottom: 1px solied #ebebeb;
    }
  }
  .order_input_box {
    background: #ffffff;
    @include px2rem(padding, 80 40 30 40);
    @include px2rem(border-radius, 20);
  }
  .order_input_box.extend {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .amount {
    @include px2rem(height, 118);
    @include px2rem(line-height, 78);
    @include px2rem(padding-bottom, 40);
    color: #333333;
    border-bottom: 1px solid #ebebeb;
    .dollar {
      vertical-align: top;
      display: inline-block;
      @include px2rem(margin-top, -10);
      @include px2rem(font-size, 36);
    }
    .input_cell {
      position: relative;
      @include px2rem(font-size, 64);
      color: #cccccc;
      .blur {
        display: inline-block;
        width: 100%;
        color: #000000;
        position: absolute;
        top: 0;
        left: 0;
        font-weight: bold;
        @include px2rem(font-size, 78);
        b {
          @include c3(animation, page_shake 1s infinite);
          display: inline-block;
          @include px2rem(height, 56);
          @include px2rem(width, 4);
          @include px2rem(margin-left, 4);
          background: #4d50fb;
        }
      }
    }
    input {
      border: none;
      width: 90%;
      @include px2rem(font-size, 64);
    }
  }
  .rate {
    @include px2rem(font-size, 24);
    @include px2rem(padding, 20 0);
    @include px2rem(line-height, 24);
    color: #999999;
    span {
      text-decoration: line-through;
      color: #cccccc;
    }
  }
}
.order_info_box {
  @include px2rem(font-size, 26);
  .icon_more {
    position: absolute;
    right: -0.05rem /* 4/75 */;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    @include px2rem(width, 20);
    @include px2rem(height, 20);
    background: url('../../assets/img/commonIcon/more_icon@3x.png') no-repeat center;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .period {
    @include px2rem(margin, 0 40);
    @include px2rem(padding, 30 0);
    background: #ffffff;
    span:nth-child(1) {
      @include px2rem(width, 230);
    }
    span:nth-child(2) {
      flex: 1;
      text-align: right;
      position: relative;
    }
    span:nth-child(3) {
      text-align: right;
    }
  }
  ul {
    background: #f7f6f8;
    @include px2rem(padding, 30 40 30 40);
    @include px2rem(border-bottom-left-radius, 20);
    @include px2rem(border-bottom-right-radius, 20);
    li {
      @include px2rem(padding, 15 0);
      > div {
        position: relative;
      }
      span:nth-child(1) {
        @include px2rem(width, 230);
      }
      span:nth-child(2) {
        flex: 1;
        text-align: right;
        position: relative;
      }
      &:last-child {
        @include px2rem(margin-bottom, 91);
      }
    }
  }
}
.order_info_blue {
  color: #4f4bff;
}
.prime_index_footer {
  > .prime_contract_txt {
    @include px2rem(font-size, 24);
    @include px2rem(line-height, 28);
    @include px2rem(height, 58);
    @include px2rem(margin, 10 40 0 40);
    @include px2rem(padding-left, 38);
    position: relative;
    color: #999;
    i {
      display: inline-block;
      @include px2rem(width, 28);
      @include px2rem(height, 28);
      position: absolute;
      left: 0;
      background: url(../../assets/img/jiuCardExclusive/public_selected_n.png) no-repeat;
      @include px2rem(background-size, 26);
      &.active {
        background-image: url(../../assets/img/jiuCardExclusive/public_selected_h.png);
      }
    }
  }
  .prime_contract_title {
    color: #333;
  }
  .borrowBtn_wrap {
    @include px2rem(padding, 0 40);
  }
  .borrowBtn {
    color: #ffffff;
    width: 100%;
    @include px2rem(height, 88);
    @include px2rem(border-radius, 20);
    @include px2rem(font-size, 32);
    background-color: #ebebeb;
  }
  .borrowBtnSuc {
    background-color: #4d50fb;
  }
  .reminder {
    @include px2rem(padding, 30 0 80);
    @include px2rem(font-size, 24);
    text-align: center;
    background-image: linear-gradient(-135deg, #3744fd 0%, #4753fa 18%, #9d21ff 100%);
    -webkit-background-clip: text;
    color: transparent;
  }
  .service {
    @include px2rem(padding, 0 60 30);
    text-align: center;
    color: #cccccc;
  }
}
.period_float_frame {
  li {
    text-align: center;
  }
  .selected {
    color: #4d50fb;
  }
  .disabled {
    color: #cccccc;
  }
}
.jf-dialog-content {
  .total_info {
    @include px2rem(font-size, 24);
    color: #999999;
    p {
      @include px2rem(line-height, 36);
    }
    .total_fee {
      @include c3(justify-content, space-between);
    }
  }
  .detail_list {
    @include px2rem(margin, 50 0 0);
    ul {
      @include c3(flex-direction, row);
      li {
        width: 100%;
        @include c3(justify-content, space-around);
      }
      li:not(:first-child) {
        @include px2rem(margin-top, 40);
      }
    }
  }
}
.cash_bottom_new_tip {
  margin: 1.0667rem 0 0.5333rem;
  font-size: 0.2667rem;
  line-height: 0.3733rem;
  @include px2rem(padding, 0 40);
  color: #999;
  > p:nth-child(2) {
    margin-top: 0.1067rem;
    margin-bottom: 0.2133rem;
  }
}
.cbo_topTips {
  @include px2rem(height, 60);
  @include px2rem(line-height, 60);
  @include px2rem(padding-left, 30);
  @include font-dpr(24);
  background-color: #fff8e8;
  color: #fab62f;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
.jiucard_eachPayWrap {
  .description {
    @include px2rem(line-height, 34);
    @include px2rem(padding-bottom, 16);
    @include px2rem(font-size, 22);
    @include c3(justify-content, space-around);
    color: #999999;
    &.flex {
      @include px2rem(padding, 0 82 40);
      > span {
        display: block;
      }
    }
  }
  ul {
    @include px2rem(padding, 0 106);
    @include px2rem(min-height, 560);
    @include px2rem(height, 560);
    overflow-y: auto;
    li {
      @include px2rem(margin-bottom, 50);
      @include px2rem(font-size, 28);
    }
  }
}
@keyframes page_shake {
  from {
    background: #4d50fb;
  }
  to {
    background: transparent;
  }
}
.slide-enter-active {
  transform-origin: left top;
  -webkit-animation: slideDown 1s;
  animation: slideDown 1s;
}
.slide-leave-active {
  transform-origin: left top;
  -webkit-animation: slideUp 1s;
  animation: slideUp 1s;
}
@-webkit-keyframes slideDown {
  from {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }

  to {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

@keyframes slideDown {
  from {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }

  to {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

@-webkit-keyframes slideUp {
  from {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }

  to {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}

@keyframes slideUp {
  from {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }

  to {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}
.color_999 {
  color: #999;
}
.color_666 {
  color: #666;
}
